<template>
	<view class="bg-white">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">入库单列表</block>
			<block slot="right"><text class="cuIcon-filter"></text>筛选</block>
		</cu-custom>
		<view class="container">
			<view class="solid-bottom">
				<scroll-view scroll-x class="bg-white nav text-center ">
					<view class="flex text-center justify-around">
						<view class="cu-item" :class="item.value==TabCur?'text-blue cur':''"
							v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="item.value">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view class="incoming_item" v-for="(item,index) in msgList" :key="index"
						@tap="goIncomingDetail(item)" :class="modalName=='move-box-'+ index?'move-cur':''"
						:data-target="'move-box-' + index">
						<view class="first_row">
							<view class="row_title">{{item.billNo}}</view>
							<view class="cuIcon-right text-gray"></view>
						</view>
						<view class="second_row">
							<view class="row_company">源单号:</view>
							<view class="right_row">
								<view class="row_center text-blue">{{item.srcNo}}</view>
								<view class="row_message text-grey">正常入库</view>
							</view>
						</view>
						<view class="second_row">
							<view class="row_depart">{{item.supplierId_dictText}}</view>
							<view class="right_row">
								<view class="row_center text-grey">{{item.createTime}}</view>
								<view class="row_message text-grey">{{item.invoiceType_dictText}}</view>
							</view>
						</view>
						<view class="bottom_line"></view>
						<view class="bottom_row">
							<view class="row_depart">入库金额:<text class="margin-left text-df text-orange">¥&nbsp;{{item.cost}}</text>
							</view>
							<view class="right_row">
								<view class="row_center text-grey">制单人:{{item.createBy_dictText}}</view>
								<view class="row_message text-grey">单据阶段:{{item.billStage_dictText}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	const tabs = [{
		title: '采购入库',
		value: 0
	}, {
		title: '采购入库SN',
		value: 1
	}, {
		title: '退货入库',
		value: 2
	}, {
		title: '盘盈入库',
		value: 3
	}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";


	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor: this.NavBarColor,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示

					},
					loading: '',
					text: '全部',
					isShowNoMore: false,
					textNoMore: '我是有底线的 >_<'
				},
				msgList: [], //列表数据
				read: "all",
				announcement1: [],
				url: "/stock/stkIo/list/101/0/0?column=createTime&order=desc",
				delUrl: '/sys/sysAnnouncementSend/delete',
				listTouchStart: 0,
				modalName: null,
				listTouchDirection: null,
			}
		},
		onShow() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			top() {
				return this.CustomBar * 2 + 95
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},
		methods: {
			upCallback(page) {
				//联网加载数据
				console.log("tabindex", this.TabCur)
				if (this.TabCur == 0) {
					this.url = "/stock/stkIo/list/101/0/0?column=createTime&order=desc"
				} else if (this.TabCur == 1) {
					this.url = "/stock/stkIo/list/101/1/0?column=createTime&order=desc"
				} else if (this.TabCur == 2) {
					this.url = "/stock/stkIo/list/1011/0/1?column=createTime&order=desc"
				} else if (this.TabCur == 3) {
					this.url = "/stock/stkIo/list/102/0/0?column=createTime&order=desc"
				} else {
					this.url = "/stock/stkIo/list/102/0/0?column=createTime&order=desc"
				}
				this.$http.get(this.url, {
					params: {
						pageNo: page.num,
						pageSize: page.size
					}
				}).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.announcement1 = res.data.result.records
					this.mescroll.endSuccess(this.announcement1.length);
					//console.log("url", res)
					//设置列表数据
					if (res.data.success) {
						console.log("res", res.data)
						for (let annItem of this.announcement1) {
							this.msgList.push(annItem)
						}
					}
					if (page.num == 1) {
						this.msgList = []; //如果是第一页需手动制空列表
						this.msgList = this.msgList.concat(this.announcement1); //追加新数据
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.msgList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			goIncomingDetail(item) {
				this.mescroll.resetUpScroll()
				let incomingItem = {
					id: item.id,
					cost: item.cost,
					srcNo: item.srcNo,
					billNo: item.billNo,
					srcBillId: item.srcBillId,
					createTime: item.createTime,
					opDept_dictText: item.opDept_dictText,
					operator_dictText: item.operator_dictText,
					createBy_dictText: item.createBy_dictText,
					billStage_dictText: item.billStage_dictText,
					supplierId_dictText: item.supplierId_dictText,
					invoiceType_dictText: item.invoiceType_dictText,
				}
				uni.navigateTo({
					url: '/pages/incoming/incomingDetail?item=' + encodeURIComponent(JSON.stringify(incomingItem))
				});
			},
		}
	}
</script>

<style scoped>
	.e-btn {
		margin-bottom: 1rem;
	}

	.titlePad {
		margin-top: 0.6rem;
	}

	.cu-list>.move-cur {
		transform: translateX(-150rpx);

	}

	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}

	.innerLine {
		height: 4upx;
		margin-left: 4%;
		width: 60%;
		background-color: #f7f7f7
	}

	.incoming_item {
		width: 100%;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		background: white;
		margin-bottom: 12rpx;
	}

	.first_row {
		width: 100%;
		display: flex;
		padding: 8rpx 16rpx;
		justify-content: space-between;
		align-items: center;
	}

	.row_title {
		margin: 4rpx;
		font-size: 32rpx;
	}

	.row_arrow {
		margin: 4rpx;
	}

	.second_row {
		width: 100%;
		display: flex;
		padding: 4rpx 16rpx;
		justify-content: space-between;
	}

	.row_company {
		margin: 4rpx;
		width: 28%;
		font-size: 24rpx;
	}

	.row_depart {
		margin: 4rpx;
		width: 36%;
		font-size: 24rpx;
	}

	.row_center {
		margin: 4rpx;
		font-size: 24rpx;
	}

	.row_message {
		margin: 4rpx;
		font-size: 24rpx;
	}

	.bottom_line {
		width: 96%;
		margin-left: 2%;
		height: 2rpx;
		margin-top: 16rpx;
		background-color: #FAF0E6;
	}

	.right_row {
		width: 64%;
		display: flex;
		justify-content: space-between;
	}

	.bottom_row {
		width: 100%;
		display: flex;
		margin-top: 12rpx;
		padding: 4rpx 16rpx;
		justify-content: space-between;
	}
</style>
